@use '@angular/material' as mat;
@import '../mixins/base-color';
@import '../component/component';
$pink-color: (
  //
  50: #f9efee,
  100: #fedbd0,
  200: #ffc2ae,
  300: #ffa988,
  400: #ff9369,
  500: #ff814f,
  600: #ff7a4a,
  700: #ff7244,
  800: #f46b40,
  900: #db5e37,
  A100: #b3ebfe,
  A200: #7fdeff,
  A400: #00c5ff,
  A700: #0098e0,
  contrast: (
    //
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: white,
    A400: white,
    A700: white
  )
);

$pink-primary: mat.m2-define-palette(mat.$m2-pink-palette, 500);
$pink-accent: mat.m2-define-palette(mat.$m2-pink-palette, A400);
$pink-warn: mat.m2-define-palette(mat.$m2-green-palette, 800);
$pink-theme: mat.m2-define-light-theme(
  (
    color: (
      primary: $pink-primary,
      accent: $pink-accent,
      warn: $pink-warn,
    ),
    typography: mat.m2-define-typography-config(),
    density: 0,
  )
);

.pink-theme {
  @include mat.all-component-themes($pink-theme);
  @include base-colors($pink-theme);
  @include component-theme($pink-theme);
}
